import { View, Text, Image, Picker } from "@tarojs/components";
import { useEffect, useState } from "react";
import { AtImagePicker, AtTextarea } from "taro-ui";
import "./index.scss";
import ico_list_map from "@/assets/image/ico_list_map.svg";
import ico_jiantou_one from "@/assets/image/ico_jiantou_one.svg";
import { back, getUser, uploadFilesList } from "@/helper/utils";
import { classifyList, talkPost, useInfo } from "@/services/entities/all";
import Taro from "@tarojs/taro";
import FormInput from "@/components/public/FormInput";
const ReleaseDynamic = () => {
  const [form, setForm] = useState({
    address: "",
    addressPre: [],
    addressNext: "",
    query: "",
    content: "",
    classifyId: "",
    imageUrl: [],
  });
  const [classType, setType] = useState<any>([]);

  const onChange = (key, value) => {
    const temp = { ...form };
    temp[key] = value;
    setForm(temp);
  };

  const chooseImage = (value: any) => {
    uploadFilesList(value).then((res) => {
      onChange(
        "imageUrl",
        res.map((item) => item.data)
      );
    });
  };

  const chooseLocation = () => {
    Taro.chooseLocation({
      success: (res) => {
        console.log(res);
        onChange("address", res.address);
      },
    });
  };

  const submit = () => {
    const result = {
      area: form.addressPre[2],
      city: form.addressPre[1],
      classifyId: form.classifyId,
      title: form.content,
      imageUrl: form.imageUrl.join(","),
      province: form.addressPre[0],
      content: "",
      wxId: getUser().id,
    };

    talkPost(result).then(() => {
      back();
    });
  };
  const changeType = (e) => {
    const value = e.detail.value;
    onChange("classifyId", value);
  };

  useEffect(() => {
    classifyList({}).then((res: any) => {
      setType(res);
    });
  }, []);
  return (
    <View className="release-dynamic-container bg-page">
      <View className="flex-column">
        <Text className="mg-tb-24 ml-22 fs-24 lh-36 cl-A4A4A4">基本信息</Text>
        <View className="dis-flex pd-lr-26 border-box bg-ffffff">
          <View className="flex-1 fs-26 lh-32 cl-848484 pd-tb-24 border-box">
            所在地区：
          </View>
          <View
            className="border-bottom flex-3 fs-26 lh-32 cl-black pd-tb-24 border-box dis-flex align-center justify-between"
            // onClick={chooseLocation}
          >
            <Picker
              mode="region"
              value={[]}
              onChange={(e) => {
                onChange("addressPre", e.detail.value);
              }}
            >
              <View className="dis-flex align-center city">
                <Text className="fs-28 lh-38 cl-black">
                  {form.addressPre?.length
                    ? form.addressPre.join("")
                    : "选择省市区"}
                </Text>
              </View>
            </Picker>
            <Image src={ico_list_map} className="img-32" />
          </View>
        </View>

        <FormInput
          value={form.addressNext}
          label="详细地址"
          placeholder="请输入详细地址"
          onChange={(value) => {
            onChange("addressNext", value);
          }}
        />
        <Picker
          mode="selector"
          range={classType.map((item) => item.name)}
          onChange={changeType}
        >
          <View className="dis-flex pd-lr-26 border-box bg-ffffff mt-16">
            <View className="flex-1 fs-26 lh-32 cl-848484 pd-tb-24 border-box">
              所在分类：
            </View>
            <View className="border-bottom flex-3 fs-26 lh-32 cl-black pd-tb-24 border-box dis-flex align-center justify-between">
              <Text className="fs-24 lh-32 cl-C2C2C2">
                {form.classifyId
                  ? classType[form.classifyId].name
                  : "选择产品类型"}
              </Text>
              <Image src={ico_jiantou_one} className="img-32" />
            </View>
          </View>
        </Picker>
      </View>
      <View className="mt-16 flex-column pl-4 pr-24 pd-tb-28 bg-ffffff">
        <View className="dis-flex">
          <View className="flex-1 fs-28 lh-32 cl-848484 pl-20 border-box">
            内容
          </View>
          <View className="flex-3 flex-column pr-20 border-box">
            <AtTextarea
              className="ml-20"
              value={form.content}
              count={false}
              onChange={(e) => {
                onChange("content", e);
              }}
              maxLength={200}
              placeholder="请输入帖子内容"
            />
            <AtImagePicker
              className="mt-32"
              files={form.imageUrl?.map((item) => {
                return { url: item };
              })}
              count={9}
              multiple={true}
              onChange={(files) => {
                chooseImage(files);
              }}
            ></AtImagePicker>
            <View className="ml-20 mt-28 flex-center pd-tb-8 border-box bg-FFF5F0 cl-E14848 fs-24 lh-32">
              注意：最多可以添加9张图片
            </View>
          </View>
        </View>
      </View>
      <View className="bottom pd-20  dis-flex align-center border-box">
        <View
          className="flex-1 flex-center pd-tb-20 border-box bg-007DDB br-8 fs-28 lh-38 cl-white"
          onClick={submit}
        >
          提交
        </View>
      </View>
    </View>
  );
};

export default ReleaseDynamic;
